<template>
    <a-modal
        class="chart-form"
        title="图表配色"
        @ok="handleOk"
        :visible.sync="visible"
        width="300px"
        @cancel="close"
        :keyboard="false"
        :maskClosable="false"
        ok-text="确认"
        cancel-text="取消"
    >
      <div class="chart-color-dialog">
          <div class="color-item" v-for="item in colorConfigs" :key="item.uuid">
                <span>{{item.alia}}</span>
                <input type="color" v-model="item.value" />
          </div>
      </div>
    </a-modal>
</template>

<script>
import {chartColors} from "@/constant"
export default {
  props: {
    visible: Boolean,
    yAxis: Array,
    colors: Array,
  },
  data() {
    return {
      colorConfigs: []
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
    getComputeType(computeType){
        let title = ""
        switch(computeType){
            case 'sum':
                title = '求和'
                break;
            case 'mean':
                title = '平均'
                break;
            case 'max':
                title = '最大值'
                break;
            case 'min':
                title = '最小值'
                break;
            case 'count':
                title = '记录数量'
                break;
        }
        return title
    },
    handleOk() {
      this.$emit("save", this.colorConfigs.map(c => ({
          uuid: c.uuid,
          value: c.value
      })));
    }
  },
  mounted(){
        let newColor = this.colors.map(c => c.value)
        let color = [...chartColors]
        for (let i = 0; i < newColor.length; i++) {
            color[i] = newColor[i];
        }
        this.colorConfigs = this.yAxis.map((y, i) => ({
            uuid: i,
            alia: `${y.rename}(${this.getComputeType(y.computeType)})`,
            value: color[i]
        }))
  }
};
</script>
<style lang="less">
.chart-color-dialog{
  .color-item{
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
  }
}
</style>